import { appConfigActions } from "@/store/appConfigSlice"
import { offActions } from "@/store/offSlice"
import { useAppDispatch, useAppSelector } from "@/utils/hooks"
import Search from "./Search"
import AppPortal from "../AppPortal"
import LoginModal from "../LoginModal"
import EditPageList from "./EditPageList"
import Wallpaper from "./Wallpaper"
import SettingMenu from "./SettingMenu"

/**
 * 全局弹出框
 * @returns ReactNode
 */
const GolbalPortal = () => {
  const {
    off: {
      editWallpaper,
    }
  } = useAppSelector(state => state)

  const dispatch = useAppDispatch()

  return (
    <>
      <LoginModal />
      <SettingMenu />
      <AppPortal visible={editWallpaper} position="right" onClose={() => {
        dispatch(offActions.update({
          editWallpaper: false
        }))
      }}>
        <Wallpaper />
      </AppPortal>
      <EditPageList />
      <Search />
    </>
  )
}

export default GolbalPortal